<template>
  <div>
    <a-page-header :ghost="false" title="所有数据总览/OVERVIEW OF ALL DATA">
      <a-row style="margin-top:5px">
        <a-col style="float: left;">
          <img
            src="https://gw.alipayobjects.com/zos/antfincdn/XAosXuNZyF/BiazfanxmamNRoxxVxka.png"
            width="72"
            alt=""
          />
        </a-col>
        <a-col class="text-info" style="float: left;">
          <p class="text-hello">早安，Smitish，祝你开心每一天！</p>
          <p>
            数据总览可以查看到大多数信息教师端后台信息
          </p>
        </a-col>
        <a-col style="float: right;">
          <div class="ant-pro-page-container-extraContent">
            <div class="antd-pro-pages-dashboard-workplace-style-extraContent">
              <div class="antd-pro-pages-dashboard-workplace-style-statItem">
                <a-statistic title="班级总数" :value="3" />
              </div>
              <div class="antd-pro-pages-dashboard-workplace-style-statItem">
                <a-statistic title="题库总数" :value="13" />
              </div>
              <div class="antd-pro-pages-dashboard-workplace-style-statItem">
                <a-statistic title="题目总数" :value="1893" />
              </div>
            </div>
          </div>
        </a-col>
      </a-row>
    </a-page-header>

    <a-row :gutter="16" style="margin-left: 16px;margin-right: 16px;">
      <a-col
        class="mt-16"
        :xs="{ span: 24 }"
        :sm="{ span: 24 }"
        :md="{ span: 24 }"
        :lg="{ span: 12 }"
        :xl="{ span: 12 }"
        :xxl="{ span: 6 }"
        ><a-card :bordered="false">
          <p class="title">学生总数</p>
          <p class="count">4,399</p>
          <Chart
            :option="allDataOption"
            style="height:150px;margin-top: -100px;"
          />
          <hr class="line" />
          <span class="description">学生总数为加入班级的所有人数</span>
        </a-card></a-col
      >
      <a-col
        class="mt-16"
        :xs="{ span: 24 }"
        :sm="{ span: 24 }"
        :md="{ span: 24 }"
        :lg="{ span: 12 }"
        :xl="{ span: 12 }"
        :xxl="{ span: 6 }"
        ><a-card :bordered="false">
          <p class="title">今日登入人数</p>
          <p class="count">1,102</p>
          <Chart
            :option="onlineChartsOption"
            style="height:150px;margin-top: -100px;"
          />
          <hr class="line" />
          <span class="description"
            >今日登入人数为登入平台的所有班级学生人数</span
          >
        </a-card></a-col
      >
      <a-col
        class="mt-16"
        :xs="{ span: 24 }"
        :sm="{ span: 24 }"
        :md="{ span: 24 }"
        :lg="{ span: 12 }"
        :xl="{ span: 12 }"
        :xxl="{ span: 6 }"
        ><a-card :bordered="false">
          <p class="title">单片机考试 - 班级平均分</p>
          <p class="count">89.4</p>
          <Chart
            :option="examScoreOption"
            style="height:150px;margin-top: -100px;"
          />
          <hr class="line" />
          <span class="description">最近考试平均分只取最近七门考试平均分</span>
        </a-card></a-col
      >
      <a-col
        class="mt-16"
        :xs="{ span: 24 }"
        :sm="{ span: 24 }"
        :md="{ span: 24 }"
        :lg="{ span: 12 }"
        :xl="{ span: 12 }"
        :xxl="{ span: 6 }"
        ><a-card :bordered="false">
          <p class="title">单片机考试成绩分布</p>
          <p class="count">63</p>
          <Chart
            :option="differentScoreOption"
            style="height:150px;margin-top: -100px;"
          />
          <hr class="line" />
          <span class="description">数值表示参加考试人数</span>
        </a-card></a-col
      >
    </a-row>
    <a-row style="margin-left: 16px;margin-right: 16px;" :gutter="16">
      <a-col
        :xs="{ span: 24 }"
        :sm="{ span: 24 }"
        :md="{ span: 24 }"
        :lg="{ span: 24 }"
        :xl="{ span: 15 }"
        :xxl="{ span: 15 }"
        class="mt-16"
      >
        <a-card title="进行中的考试">
          <a slot="extra" @click="goExamRouter">more</a>
          <a-row>
            <a-col
              :xs="{ span: 24 }"
              :sm="{ span: 24 }"
              :md="{ span: 24 }"
              :lg="{ span: 12 }"
              :xl="{ span: 12 }"
              :xxl="{ span: 8 }"
            >
              <a-card-grid style="width:100%;height:100%">
                <a-row :gutter="16">
                  <a-col :span="4">
                    <a-avatar
                      icon="user"
                      src="https://gw.alipayobjects.com/zos/rmsportal/kZzEzemZyKLKFsojXItE.png"
                    />
                  </a-col>
                  <a-col :span="20">
                    <p class="examTitle">单片机考试</p>
                    <p>
                      考试时间:
                      <span class="examTime">2020-10-02 18:29-20:29</span>
                    </p>
                  </a-col>
                </a-row>
              </a-card-grid>
            </a-col>
            <a-col
              :xs="{ span: 24 }"
              :sm="{ span: 24 }"
              :md="{ span: 24 }"
              :lg="{ span: 12 }"
              :xl="{ span: 12 }"
              :xxl="{ span: 8 }"
            >
              <a-card-grid style="width:100%;height:100%">
                <a-row :gutter="16">
                  <a-col :span="4">
                    <a-avatar
                      icon="user"
                      src="https://gw.alipayobjects.com/zos/rmsportal/siCrBXXhmvTQGWPNLBow.png"
                    />
                  </a-col>
                  <a-col :span="20">
                    <p class="examTitle">单片机考试</p>
                    <p>
                      考试时间:
                      <span class="examTime">2020-10-02 18:29-20:29</span>
                    </p>
                  </a-col>
                </a-row>
              </a-card-grid>
            </a-col>
            <a-col
              :xs="{ span: 24 }"
              :sm="{ span: 24 }"
              :md="{ span: 24 }"
              :lg="{ span: 12 }"
              :xl="{ span: 12 }"
              :xxl="{ span: 8 }"
            >
              <a-card-grid style="width:100%;height:100%">
                <a-row :gutter="16">
                  <a-col :span="4">
                    <a-avatar
                      icon="user"
                      src="https://gw.alipayobjects.com/zos/rmsportal/sfjbOqnsXXJgNCjCzDBL.png"
                    />
                  </a-col>
                  <a-col :span="20">
                    <p class="examTitle">单片机考试</p>
                    <p>
                      考试时间:
                      <span class="examTime">2020-10-02 18:29-20:29</span>
                    </p>
                  </a-col>
                </a-row>
              </a-card-grid>
            </a-col>
            <a-col
              :xs="{ span: 24 }"
              :sm="{ span: 24 }"
              :md="{ span: 24 }"
              :lg="{ span: 12 }"
              :xl="{ span: 12 }"
              :xxl="{ span: 8 }"
            >
              <a-card-grid style="width:100%;height:100%">
                <a-row :gutter="16">
                  <a-col :span="4">
                    <a-avatar
                      icon="user"
                      src="https://gw.alipayobjects.com/zos/rmsportal/dURIMkkrRFpPgTuzkwnB.png"
                    />
                  </a-col>
                  <a-col :span="20">
                    <p class="examTitle">单片机考试</p>
                    <p>
                      考试时间:
                      <span class="examTime">2020-10-02 18:29-20:29</span>
                    </p>
                  </a-col>
                </a-row>
              </a-card-grid>
            </a-col>
          </a-row>
        </a-card></a-col
      >
      <a-col
        :xs="{ span: 24 }"
        :sm="{ span: 24 }"
        :md="{ span: 24 }"
        :lg="{ span: 24 }"
        :xl="{ span: 9 }"
        :xxl="{ span: 9 }"
        class="mt-16"
      >
        <a-card title="我的班级">
          <a-row :gutter="16">
            <a-col
              :xs="{ span: 24 }"
              :sm="{ span: 12 }"
              :md="{ span: 8 }"
              :lg="{ span: 8 }"
              :xl="{ span: 12 }"
              :xxl="{ span: 12 }"
              class="mt-16"
            >
              <a-avatar
                icon="user"
                src="https://gw.alipayobjects.com/zos/rmsportal/dURIMkkrRFpPgTuzkwnB.png"
              />
              <span class="class">计算机科学与技术</span>
            </a-col>
            <a-col
              :xs="{ span: 24 }"
              :sm="{ span: 12 }"
              :md="{ span: 8 }"
              :lg="{ span: 8 }"
              :xl="{ span: 12 }"
              :xxl="{ span: 12 }"
              class="mt-16"
            >
              <a-avatar
                icon="user"
                src="https://gw.alipayobjects.com/zos/rmsportal/kZzEzemZyKLKFsojXItE.png"
              />
              <span class="class">电器及其自动化</span>
            </a-col>
            <a-col
              :xs="{ span: 24 }"
              :sm="{ span: 12 }"
              :md="{ span: 8 }"
              :lg="{ span: 8 }"
              :xl="{ span: 12 }"
              :xxl="{ span: 12 }"
              class="mt-16"
            >
              <a-avatar
                icon="user"
                src="https://gw.alipayobjects.com/zos/rmsportal/zOsKZmFRdUtvpqCImOVY.png"
              />
              <span class="class">软件工程</span>
            </a-col>
            <a-col
              :xs="{ span: 24 }"
              :sm="{ span: 12 }"
              :md="{ span: 8 }"
              :lg="{ span: 8 }"
              :xl="{ span: 12 }"
              :xxl="{ span: 12 }"
              class="mt-16"
            >
              <a-avatar icon="usergroup-add" />
              <a href="" class="class">创建班级</a>
            </a-col>
          </a-row>
        </a-card></a-col
      >
      <a-col
        :xs="{ span: 24 }"
        :sm="{ span: 24 }"
        :md="{ span: 24 }"
        :lg="{ span: 24 }"
        :xl="{ span: 9 }"
        :xxl="{ span: 9 }"
        class="mt-16"
      >
        <a-card title="我的班级">
          <a-row :gutter="16">
            <a-col
              :xs="{ span: 24 }"
              :sm="{ span: 12 }"
              :md="{ span: 8 }"
              :lg="{ span: 8 }"
              :xl="{ span: 12 }"
              :xxl="{ span: 12 }"
              class="mt-16"
            >
              <a-avatar
                icon="user"
                src="https://gw.alipayobjects.com/zos/rmsportal/dURIMkkrRFpPgTuzkwnB.png"
              />
              <span class="class">计算机科学与技术</span>
            </a-col>
            <a-col
              :xs="{ span: 24 }"
              :sm="{ span: 12 }"
              :md="{ span: 8 }"
              :lg="{ span: 8 }"
              :xl="{ span: 12 }"
              :xxl="{ span: 12 }"
              class="mt-16"
            >
              <a-avatar
                icon="user"
                src="https://gw.alipayobjects.com/zos/rmsportal/dURIMkkrRFpPgTuzkwnB.png"
              />
              <span class="class">计算机科学与技术</span>
            </a-col>
            <a-col
              :xs="{ span: 24 }"
              :sm="{ span: 12 }"
              :md="{ span: 8 }"
              :lg="{ span: 8 }"
              :xl="{ span: 12 }"
              :xxl="{ span: 12 }"
              class="mt-16"
            >
              <a-avatar
                icon="user"
                src="https://gw.alipayobjects.com/zos/rmsportal/dURIMkkrRFpPgTuzkwnB.png"
              />
              <span class="class">计算机科学与技术</span>
            </a-col>
            <a-col
              :xs="{ span: 24 }"
              :sm="{ span: 12 }"
              :md="{ span: 8 }"
              :lg="{ span: 8 }"
              :xl="{ span: 12 }"
              :xxl="{ span: 12 }"
              class="mt-16"
            >
              <a-avatar icon="usergroup-add" />
              <a href="" class="class">创建班级</a>
            </a-col>
          </a-row>
        </a-card></a-col
      >
    </a-row>
  </div>
</template>

<script>
import Chart from "../../../components/Chart";
export default {
  data() {
    return {
      allDataOption: {
        title: {
          left: "center"
        },
        tooltip: {
          trigger: "item",
          formatter: "{a} <br/>{b} : {c} ({d}%)"
        },

        series: [
          {
            name: "数据统计",
            type: "pie",
            radius: "60%",
            center: ["60%", "60%"],
            data: [
              { value: 17, name: "单选题数量" },
              { value: 27, name: "多选题数量" },
              { value: 37, name: "判断题数量" },
              { value: 47, name: "填空题数量" },
              { value: 57, name: "问答题数量" }
            ],
            emphasis: {
              itemStyle: {
                shadowBlur: 10,
                shadowOffsetX: 0,
                shadowColor: "rgba(0, 0, 0, 0.5)"
              }
            }
          }
        ]
      },
      onlineChartsOption: {
        tooltip: {
          trigger: "axis" //鼠标经过提示
        },
        grid: {
          bottom: 10,
          left: 0,
          right: 0
        },
        xAxis: {
          type: "category",
          boundaryGap: false,
          data: [
            "10月1日",
            "10月2日",
            "10月3日",
            "10月4日",
            "10月5日",
            "10月6日",
            "10月7日",
            "10月8日",
            "10月9日",
            "10月10日",
            "10月11日",
            "10月12日"
          ],
          show: false //不显示坐标轴线、坐标轴刻度线和坐标轴上的文字
        },
        yAxis: {
          type: "value",
          show: false //不显示坐标轴线、坐标轴刻度线和坐标轴上的文字
        },
        series: [
          {
            name: "上线人数",
            data: [3, 5, 3, 2, 0, 4, 2, 10, 6, 4, 2, 6],
            type: "line",
            showSymbol: false,
            areaStyle: {}
          }
        ]
      },
      examScoreOption: {
        color: ["#1890FF"],
        tooltip: {
          trigger: "axis",
          axisPointer: {
            // 坐标轴指示器，坐标轴触发有效
            type: "shadow" // 默认为直线，可选为：'line' | 'shadow'
          }
        },
        grid: {
          bottom: 10,
          left: 0,
          right: 0
        },
        xAxis: {
          type: "category",
          data: [
            "单片机考试",
            "测试一",
            "测试二",
            "测试三",
            "测试四",
            "测试五",
            "测试六"
          ],
          axisTick: {
            alignWithLabel: true
          },
          show: false //不显示坐标轴线、坐标轴刻度线和坐标轴上的文字
        },
        yAxis: {
          type: "value",
          show: false //不显示坐标轴线、坐标轴刻度线和坐标轴上的文字
        },
        series: [
          {
            name: "平均分",
            type: "bar",
            barWidth: "50%",
            data: [89.4, 78.1, 60.1, 64.1, 90.4, 87, 66]
          }
        ]
      },
      differentScoreOption: {
        tooltip: {
          trigger: "item",
          formatter: "{a} <br/>{b}: {c} ({d}%)"
        },
        legend: {
          orient: "vertical",
          right: 10,
          data: ["90分以上", "80-89", "70-79", "60-69", "60以下"]
        },
        series: [
          {
            name: "单片机考试",
            type: "pie",
            radius: ["50%", "70%"],
            avoidLabelOverlap: false,
            label: {
              show: false,
              position: "center"
            },
            emphasis: {
              label: {
                show: true,
                fontSize: "16"
              }
            },
            labelLine: {
              show: false
            },
            data: [
              { value: 335, name: "90分以上" },
              { value: 310, name: "80-89" },
              { value: 234, name: "70-79" },
              { value: 135, name: "60-69" },
              { value: 1548, name: "60以下" }
            ]
          }
        ]
      }
    };
  },
  methods: {
    goExamRouter() {
      const { $router } = this;
      $router.push("/home/studentData/examinationTotal");
    }
  },
  beforeDestroy() {
    clearInterval(this.interval);
  },
  components: {
    Chart
  }
};
</script>

<style scoped>
.mt-16 {
  margin-top: 16px;
}
.title {
  color: rgba(0, 0, 0, 0.45);
  font-size: 14px;
  line-height: 22px;
}
.count {
  color: rgba(0, 0, 0, 0.85);
  font-size: 30px;
}
.line {
  border-top: 2px dashed #aaa;
}
.description {
}
.number {
  color: #1890ff;
  font-weight: bold;
}
.text-hello {
  margin-bottom: 12px;
  color: rgba(0, 0, 0, 0.85);
  font-weight: 500;
  font-size: 20px;
  line-height: 28px;
}
.text-info {
  position: relative;
  top: 4px;
  margin-left: 24px;
  color: rgba(0, 0, 0, 0.45);
  line-height: 22px;
  flex: 1 1 auto;
}
.ant-pro-page-container-main .ant-pro-page-container-extraContent {
  min-width: 242px;
  margin-left: 88px;
  text-align: right;
}
.ant-pro-page-container-main .ant-pro-page-container-extraContent,
.ant-pro-page-container-main .ant-pro-page-container-main {
  flex: 0 1 auto;
}
.antd-pro-pages-dashboard-workplace-style-extraContent {
  zoom: 1;
  float: right;
  white-space: nowrap;
}
.antd-pro-pages-dashboard-workplace-style-extraContent
  .antd-pro-pages-dashboard-workplace-style-statItem {
  position: relative;
  display: inline-block;
  padding: 0px 32px;
}
.examTitle {
  font-size: 20px;
  font-weight: 900;
}
.examTime {
  font-size: 14px;
  color: #1890ff;
}
.ant-card-grid-hoverable:hover {
  position: relative;
  z-index: 1;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
  background: #e6f7ff;
}
.class {
  font-size: 14px;
  margin-left: 6px;
}
</style>
